<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="wrapbd trade_count">
            <div class="tittab"><span class="active"><router-link to="/lmyorder">构树链交易</router-link></span><span><router-link to="/mmyorder">构树苗交易</router-link></span></div>
            <ul class="tablist" id="istab"><li class="active" @click="tradeData(1,4)">交易中订单</li><li @click="tradeData(1,5)">已完成订单</li></ul>
            <div class="tables">
                <div class="tit"><span>时间</span><span>买/卖</span><span>成交价</span><span>成交量</span><span>支付方式</span><span>操作</span></div>
                <ul>
                    <li v-for="(item,index) in tradeDataArr" :key="index"><span>{{item.create_time | mdDate}}</span><span :class="{'red':item.show == '买','green':item.show == '卖',}">{{item.show}}</span><span>{{item.unit_price | nubFixed}}</span><span>{{item.num | nubFixed}}</span><span v-html="paytypeTrans(item.pay_type)"></span><span @click="looktoPath(item.order_no)" class="blur">查看</span></li>
                    <p v-if="tradeDataArr.length == 0">没有更多数据</p>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";   
    import { Tab, Tabs } from 'vant';
    export default {
        data(){
            return {
                headText: '我的交易',  //我的订单
                tradeDataArr:[],
                pageNum:'',  //总页数
                page:1,  //页数
            }
        },
		mounted(){
            let t_nav = document.getElementById('istab');
            this.Tools.tabSwitch({li:t_nav.getElementsByTagName('li')});  //tab切换
            this.tradeData(1,4)
		},
        methods:{
            //返回
            onClickLeft () { this.$router.push('/user');},
            //订单列表数据
            tradeData(b_id,l_id){
                let _this = this;
                this.tradeDataArr = [];
                this.Tools.AXIOS({
                    url: 'trade/list',
                    transformRequest:{
                        b_type: b_id,
                        l_type: l_id,
                        page: this.page || 1,
                        pageSize: 100,
                    },
                    success: function (res) {
                        _this.pageNum = res.data.data.pageNum;
                        _this.tradeDataArr.push(...res.data.data.list);
                    }
                })    
            },
            //分页加载
            onLoad(b_id,l_id) {
                if(this.page < this.pageNum){
                    this.page++;
                    this.tradeData({b_type: b_id,l_type: l_id}); 
                }
            },
            //支付方式转换为图标   .toString().replace(",","")
            paytypeTrans(pay_type){
                let arr = pay_type.split(',')
                let map = new Map([
                    ['1','<span class="w"></span>'],
                    ['2','<span class="z"></span>'],
                    ['3','<span class="y"></span>'],
                ]);
                return Array.join(arr.map((key,val)=>{
                    return map.get(key);
                })).replace(new RegExp(/(,)/g),' ')
            },
            //查看
            looktoPath(id,typeid){
                this.$router.push({path:'myorderDetail',query: {ordid:id}});
            }
        },
        components:{
            HeadTitle,
            Tab,
            Tabs,
        }
    }
</script>
<style scoped>
.tittab{ width: 100%; display: flex; justify-content: space-around; text-align: center; background: #fff; border-bottom: 1px solid #F3F3F3;}
.tittab span{ width: 50%; padding: .3rem 0; font-size: .4rem;}.tittab span a{ color: #666;}
.tittab span.active{ color: red; border-bottom: 2px solid red;}.tittab span.active a{ color:red;}
.trade_count{ width: 100%; background: #fff;}
.trade_count .tables{ width: 100%; overflow: hidden;}
.trade_count .tablist{ width: 90%; border: 1px solid #337AB7; overflow: hidden; border-radius: 3px; text-align: center; background: #fff; margin: .5rem auto;}
.trade_count .tablist li{ width: 50%; padding: .2rem 0; float: left; border-bottom: none!important; border-right: 1px solid #337AB7; box-sizing: border-box;}
.trade_count .tablist li:nth-last-of-type(1){ border: 0;}
.trade_count .tablist li.active{ background: #337AB7; color: #fff;}
.trade_count .tables ul{ background: #fff;}
.trade_count .tables li span,.trade_count .tables div span{ position: relative; width: 16.66%; float: left; text-align: center; font-size: .35rem; color: #000;}
.trade_count .tables li{ padding: .3rem 0; overflow: hidden; border-bottom: 1px solid #F6F6F6;}
.trade_count .tables .tit{ overflow: hidden; background: #fff; padding: .3rem 0; border-bottom: 1px solid #F6F6F6; border-top: 1px solid #F6F6F6}
.trade_count .tables p{ color: #ccc; padding: .3rem 0; text-align: center;}
.trade_count .tables li input{ color: #fff; border-radius: 3px; padding: .1rem .3rem; position: absolute; left: .3rem; top:-.1rem;}
.tabin{ background: #C93E0A;}.tabout{ background: green;}.revoke{ background: #337AB7;}
.trade_count .putOrder{ width: 95%; margin: 0 auto; padding: 0 0 .8rem;}
.trade_count .putOrder .pt{ width: 100%; display: flex; margin: .6rem 0;}
.trade_count .putOrder .pt span{ width: 18%; font-size: .32rem; line-height: .75rem;}
.trade_count .putOrder .pt input{ border: 1px solid #ccc; height: .75rem; width: 71%; font-size: .3rem; text-indent: .2rem; border-radius: 3px;}
.trade_count .putOrder .l_button{ padding: .2rem 0; border-radius: 3px; margin: 7% auto 0;}
.isradio{ width:75%; display: flex; margin-top: .1rem;}.ptcheck{ margin-left: 6%;}.margin_r{margin-right: 6%;}
.passwodInt{ width: 100%; height: 55%; position: absolute; bottom: 0; left: 0; z-index: 2000; background: #fff;}
.passwodInt .van-password-input{ margin-top: 8%;}
</style>